<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>管理系统</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../css/style.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body>
<div id="a">
    <el-input placeholder="名称/类别" v-model="map.name" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"></el-input>
    <el-button @click="findPage(1)" class="dalfBut">查询</el-button>
    <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>

    <div id="newsContent" class="table-responsive" style="overflow: scroll;" v-cloak>
        <table class="table table-hover table-bordered text-nowrap" border="1" cellspacing="0" cellpadding="0">
            <tr>
                <td>老师编号</td>
                <td>老师姓名</td>
                <td>老师年龄</td>
                <td>拥有学生</td>
            </tr>
            <tbody id="dataTable">
            <tr v-for="data in page.list">
                <td>{{data.id}}</td>
                <td>{{data.name}}</td>
                <td>{{data.age}}</td>
                <td>{{data.sname}}</td>
            </tr>
            </tbody>
        </table>
        <div id="pageID" class="page_div"></div>
    </div>

    第&nbsp;{{page.pageNum}}&nbsp;页&nbsp;共&nbsp;{{page.lastPage}}&nbsp;页&nbsp;共&nbsp;{{page.total}}&nbsp;条
    <input class="btn btn-info btn-group-sm" value="首页" type="button" @click="findPage(1)">
    <input class="btn btn-info btn-group-sm" v-if="page.pageNum!=1" value="上一页" @click="findPage(page.prePage)"
           type="button">
    <input class="btn btn-info btn-group-sm" v-if="page.pageNum!=page.lastPage" value="下一页"
           @click="findPage(page.nextPage)" type="button">
    <input class="btn btn-info btn-group-sm" value="尾页" @click="findPage(page.lastPage)" type="button">

    <!-- 新增标签弹层 -->
    <div class="add-form">
        <el-dialog title="新增" :visible.sync="dialogFormVisible">
            <template>
                <el-tabs v-model="activeName" type="card">
                    <el-tab-pane label="基本信息" name="first">
                        <el-form ref="dataAddForm" :model="formData" label-position="right" label-width="100px">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="老师名称" prop="name">
                                        <el-input v-model="formData.name"/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="老师年龄" prop="age">
                                        <el-input v-model="formData.age"/>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="学生信息" name="second">
                        <div class="checkScrol">
                            <table class="datatable">
                                <thead>
                                <tr>
                                    <th>选择</th>
                                    <th>学生编码</th>
                                    <th>学生名称</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="c in tableData">
                                    <td>
                                        <input :id="c.sid" v-model="ids" type="checkbox" :value="c.sid">
                                    </td>
                                    <td><label :for="c.sid">{{c.sid}}</label></td>
                                    <td><label :for="c.sid">{{c.sname}}</label></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </template>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="handleAdd()">确定</el-button>
            </div>
        </el-dialog>
    </div>

</div>
<script>
    new Vue({
        el: "#a",
        data: {
            activeName:'first',//添加/编辑窗口Tab标签名称
            page: {},
            map:{
                name:""
            },
            dialogFormVisible: false,//控制添加窗口显示/隐藏
            formData: {},//表单数据
            tableData:[],//新增和编辑表单中对应的检查项列表数据
            ids:[],
        },
        created() {
            this.findPage(1)
        },
        methods: {
            findPage(pageIndex,name) {
                axios.post("/teacher/findAll?pageIndex="+ pageIndex,this.map).then(res => {
                    this.page = res.data
                })
            },
            // 弹出添加窗口
            handleCreate() {
                this.resetForm();
                this.dialogFormVisible = true;
                //发送ajax请求，查询所有的检查项信息，转为json，赋值给tableData
                this.activeName = 'first';//默认选中first对应的tab
                //查询所有老师信息  上级信息
                axios.get("/student/find").then(res=>{
                    this.tableData = res.data;
                })
            },
            // 重置表单
            resetForm() {
                this.formData = {};
            },
            //添加
            handleAdd () {
                //alert(this.ids);
                this.$refs['dataAddForm'].validate((valid) => { //获取 ref属性是dataEditForm的表单   validate表单检验的方法
                    // valid  描述的表单提交的结果(true  false)  true表单成功校验 false 表单校验失败
                    if(valid){
                        //发送ajax请求，将表单数据提交到后台进行处理
                        // this.formData.hobby = this.formData.hobby.join(",");
                        axios.post("/student/add?ids="+this.ids,this.formData).then((res) => {
                            //关闭新增窗口
                            this.dialogFormVisible = false;
                            this.$message({
                                type:res.data.flag?'success':'error',
                                message:res.data.message
                            });
                        }).catch((res)=>{
                            if(res.message.includes("403")) {
                                this.$message.error("无操作权限！")
                            }
                        }).finally(() => {
                            //重新进行分页查询
                            this.findPage(1);
                        });
                    }else{
                        //表单校验不通过
                        this.$message.error("表单数据校验失败!");
                        return false;
                    }
                });
            },
        }
    })
</script>
</body>
</html>